<template>
  <div class="history">
    <nav>
      <p>历史记录</p>
      <p style="color:red;" @click="$store.commit('clear')">全部删除</p>
    </nav>
    <li
      :class="{ active: isShow == i }"
      v-for="(v, i) in $store.state.objList"
      :key="i"
      @click="searchBtn(v, i)"
    >
      <span>{{ v }}</span>
      <p @click.stop="$store.commit('remove', i)">X</p>
    </li>
  </div>
</template>

<script>
import { ref, reactive, toRefs } from "vue";
export default {
  setup(props, { emit }) {
    let isShow = ref(-1);
    function searchBtn(value, i) {
      emit("searchChange", value);
      isShow.value = i;
    }
    return { searchBtn, isShow };
  },
  components: {},
};
</script>

<style lang="scss" scoped>
.active {
  border: 1px solid red !important;
}
.history {
  display: flex;
  flex-wrap: wrap;
  nav {
    display: flex;
    width: 100%;
    height: 40px;
    background-color: #ccc;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
  }
  li {
    width: auto;
    padding: 10px;
    display: flex;
    border: 1px solid #000;
    border-radius: 20px;
    margin: 10px;
    list-style: none;
    p {
      margin-left: 30px;
    }
  }
}
</style>
